<template>
  <div class="comment-outer">
    <!-- 搜索版块 -->
    <div class="search_box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="评论关键词">
          <el-input
            v-model="searchInfo"
            placeholder="输入评论关键词"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button
            type="primary"
            @click="
              () => {
                searchInfo = '';
                set();
              }
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="list_box1">
      <div class="list_table">
        <el-table
          size="small"
          :data="data"
          :height="tableHeight"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="{ background: '#EEF1F6' }"
        >
          <!-- <el-table-column
            type="selection"
            width="40"
            align="center"
          ></el-table-column> -->
          <el-table-column label="用户头像" width="110" align="center">
            <template v-slot="scope">
              <div
                style="
                  width: 80px;
                  height: 80px;
                  overflow: hidden;
                  display: inline-block;
                "
              >
                <img :src="getUrl(scope.row.avatar)" style="width: 100%" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="50"></el-table-column>
          <el-table-column
            prop="userName"
            label="用户"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column prop="content" label="评论内容" align="center">
            <template v-slot="scope">
              <el-scrollbar height="100px">
                <p>
                  {{ scope.row.content }}
                </p>
              </el-scrollbar>
            </template>
          </el-table-column>
          <el-table-column
            prop="songName"
            label="评论歌曲名称"
            align="center"
          ></el-table-column>
          <el-table-column prop="createTime" label="评论时间" align="center">
            <template v-slot="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template v-slot="scope">
              <el-popconfirm
                title="删除不可恢复，是否确定删除?"
                @confirm="deleteRow(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="list_pagination">
      <el-pagination
        class="pagination"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 内容版块 -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getAllCommentPlayList, delComment } from "@/api";
const tableData = ref([]); // 记录歌曲，用于显示
const currentPage = ref(1);
const pageSize = ref(10);
const multipleSelection = ref([]); // 记录当前要删除的列表
const data = ref([]);
const searchInfo = ref(""); // 记录输入框输入的内容
const tableHeight = ref(0);
tableHeight.value = window.innerHeight - 205;
const handleCurrentChange = (val: any) => {
  currentPage.value = val;
  console.log(`current page: ${val}`);
  getData();
};
//表格时间格式化
function formatDate(cellValue: any) {
  if (cellValue == null || cellValue == "") return "";
  const date = new Date(cellValue);
  const year = date.getFullYear();
  const month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  const hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  const minutes =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  const seconds =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return (
    year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
  );
}
async function handleSearch() {
  currentPage.value = 1;
  tableData.value = data.value = await getAllCommentPlayList({
    type: 2,
    query: searchInfo.value.trim(),
  });
}
function getData() {
  searchInfo.value = "";
  data.value = tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
}
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
  getData();
}
async function deleteRow(id: number) {
  const res = await delComment({ type: 2, id });
  set();
}
async function set() {
  tableData.value = [];
  currentPage.value = 1;
  const comments = await getAllCommentPlayList({
    type: 2,
    query: "",
  });
  tableData.value = comments;
  getData();
}
onMounted(() => {
  set();
});
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin-right: 4px;
}

:deep(.el-table__cell) {
  border-bottom: none !important;
}

.inner_icon {
  fill: #4d70ff;
  margin-right: 2px;
}

.inner_icon:hover {
  fill: #2d56fa;
}

.comment-outer {
  padding-bottom: 10px;
}

.list_box1 {
  text-indent: 0;
  background: #fff;
  border-radius: 4px;
  overflow: auto;
}

.list_box_but,
.list_table {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}

.list_box_but1 {
  margin-top: 0px;
}

.list_box_but a {
  color: #fff;
}

.list_pagination {
  //padding-top: 14px;
  text-indent: 0;

  > div {
    justify-content: flex-end;
    margin-right: 20px;
  }
}
</style>
